<template>
  <!-- 合同历史页 -->
  <div
    class="filesHistoryPage"
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="scrollDisFlag"
    style="height: 450px; overflow: auto"
  >
    <template v-if="fileHistoryState.formDataArr.length">
      <div v-for="(n, i) in fileHistoryState.formDataArr" :key="i">
        <CommonTitle :titleName="`${n.contractName} - ${n.contractId}`">
          <template #rightCnBox>
            <div class="titleRight">
              <el-button
                class="button_view"
                @click="goApprove(n.contractId)"
                >查看会审单</el-button
              >
              <el-button
                plain
                class="button_funtion"
                @click="openDownLoadDialog(n.list)"
                >下载合同</el-button
              >
            </div>
          </template>
        </CommonTitle>
        <div class="inpuBox">
          <el-form
            :inline="true"
            class="demo-form-inline"
            label-position="right"
            label-width="90px"
          >
            <el-row>
              <el-col :span="7">
                <el-form-item style="width: 100%" label="项目名称">
                  <el-input disabled v-model="n.projectName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item style="width: 100%" label="合同类型">
                  <el-input
                    disabled
                    :value="n.signType ? n.signType : '--'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  style="width: 100%"
                  label="合同签订时间"
                  label-width="160px"
                >
                  <el-input
                    disabled
                    :value="n.signTime ? n.signTime : '--'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item style="width: 100%" label="承租方">
                  <el-input
                    disabled
                    :value="n.customerNames ? n.customerNames : '--'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item style="width: 100%" label="合同金额">
                  <el-input
                    disabled
                    :value="n.contractTotalPrice ? n.contractTotalPrice : '--'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  style="width: 100%"
                  label="租赁用途"
                  label-width="160px"
                >
                  <el-input
                    disabled
                    :value="n.purpose ? n.purpose : '--'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item style="width: 100%" label="签约方式">
                  <el-input
                    disabled
                    v-model="n.competitionLeaseType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item style="width: 100%" label="出租限期">
                  <el-input disabled v-model="n.signDuringTime"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  style="width: 100%"
                  label="经办人姓名及部门"
                  label-width="160px"
                >
                  <el-input disabled v-model="n.personInfo"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 选择下载合同弹窗 -->
      <el-dialog
        title="选择下载合同"
        v-model="dialogVisibleFlag"
        width="782px"
        class="downLoadDialogBox"
        center
        :close-on-click-modal="false"
      >
        <el-table :data="downLoadTableData" border>
          <el-table-column
            type="index"
            label="序号"
            width="70"
            align="center"
          />
          <el-table-column prop="fileName" label="合同名称" align="center" />
          <el-table-column label="操作" width="100" align="center" fixed="right">
            <template #default="scope">
              <a target="_blank" style="color:#FF7B50;text-decoration:none" :href="scope.row.fileAddress" :download="scope.row.fileName">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </template>
    <template v-else>
      <div class="nodataBox">暂无数据</div>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElDialog } from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import dayjs from "dayjs";
import { assetFilesApi } from "@/api/assets";

const router = useRouter();
// 从路由path中获取的
const getAssetsId = router.currentRoute.value.params.assetsId;

const fileHistoryState = reactive({
  pageNumber: 1,
  formDataArr: [],
});

// 滚动后的加载方法
const loadMore = () => {
  fileHistoryState.pageNumber += 1;
  initInfo();
};
//是否禁用无限滚动加载
const scrollDisFlag = ref(false);
// 初始化方法
const initInfo = () => {
  scrollDisFlag.value = true;
  let params = {
    pageNum: fileHistoryState.pageNumber,
    pageSize: 5,
    param: getAssetsId,
  };
  assetFilesApi.getContractHistoryPage(params).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      if (data.content.length) {
        let getArr = data.content.map((n, i) => {
          n.signType == 1 ? (n.signType = "新签") : (n.signType = "续签");
          n.competitionLeaseType == 1
            ? (n.competitionLeaseType = "公开竟租")
            : (n.competitionLeaseType = "线下竟租");
          n.signDuringTime =
            dayjs(n.signStartTime).format("YYYY-MM-DD") +
            " 至 " +
            dayjs(n.signEndTime).format("YYYY-MM-DD");
          n.personInfo = n.userName + " ( " + n.departmentName + " )";
          return n;
        });
        fileHistoryState.formDataArr =
          fileHistoryState.formDataArr.concat(getArr);
        scrollDisFlag.value = false;
      }
    }
  });
};
const goApprove = (id) => {
  router.push({ path: `/asset/collaborativeApproval/huiShenForm/${id}` });
};
const dialogVisibleFlag = ref(false);
const downLoadTableData = ref([]);
const openDownLoadDialog = (fileListArr) => {
  if (fileListArr.length) {
    downLoadTableData.value = fileListArr.map((n, i) => {
      n.index = i + 1;
      return n;
    });
    dialogVisibleFlag.value = true;
  } else {
    ElMessage.info("暂无可下载的文件");
  }
};

onMounted(() => {
  initInfo();
});
</script>

<style lang="scss" scoped>
.filesHistoryPage {
  padding-right: 10px;
  .titleRight {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
  .inpuBox {
    padding: 32px 76px 0;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 30px;
  }
  .nodataBox {
    width: 100%;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 18px;
    color: #ccc;
  }
}
</style>
<style lang="scss" scoped>
.filesHistoryPage {
  .inpuBox {
    .demo-form-inline {
      .el-form-item {
        margin-bottom: 34px;
        .el-form-item__label {
          font-weight: 500;
          font-size: 16px;
          font-family: SourceHanSansMedium;
        }
        .el-form-item__content {
          .el-date-editor.el-input,
          .el-date-editor.el-input__wrapper {
            width: 100%;
            .el-input__wrapper {
              width: 100%;
            }
          }
        }
      }
    }
  }
  .downLoadDialogBox {
    .el-dialog__header {
      padding-top: 18px;
      padding-bottom: 0;
      .el-dialog__title {
        font-size: 16px;
        font-weight: 500;
        color: #1a1a1a;
        font-family: SourceHanSansMedium;
      }
    }
    .el-dialog__body {
      padding-top: 25px;
      .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
        padding: 20px 0;
        background: #f7f7fa;
        .cell {
          font-weight: 400;
          color: #4d4d4d;
        }
      }
    }
  }
}
</style>
